<template>
    <div class="container">
        <div class="row">
            <div class="row">
                <div class="col-3">
                    <el-button @click="current='edit'" type="primary">编辑</el-button>
                    <el-button @click="current='show';text=textarea" type="primary">预览</el-button>
                </div>
                <div class="col-3">
                    
                </div>
                <div class="col-6 lang">
                    <el-tag class="ml-3" style="height: 5vh;" type="success">请选择语言</el-tag>
                    <el-select style="height: 5vh" v-model="lang">
                        <el-option
                        v-for="lang in langList"
                        :key="lang.id"
                        :value="lang.lang"
                        />
                    </el-select>
                </div>
            </div>
            <div v-if="current == 'edit'" id="code">
                <VAceEditor
                    v-model:value="textarea"
                    type="textarea"
                    @init="editorInit"
                    :lang="lang"
                    theme="monokai"
                    autoHeight="true"
                    :options="{
                        enableBasicAutocompletion: true,
                        enableSnippets: true,
                        enableLiveAutocompletion: true,
                        fontSize: 14,
                        tabSize: 4,
                        showPrintMargin: false,
                        highlightActiveLine: true,
                    }"
                    style="height: 80vh" />
            </div>
            <!-- <div v-if="current == 'show'" id="code">
                <VAceEditor
                    v-model:value="textarea"
                    type="textarea"
                    @init="editorInit"
                    lang="c_cpp"
                    theme="textmate"
                    :options="{
                        enableBasicAutocompletion: true,
                        enableSnippets: true,
                        enableLiveAutocompletion: true,
                        fontSize: 14,
                        tabSize: 2,
                        showPrintMargin: false,
                        highlightActiveLine: true,
                    }"
                    style="height: 300px" />
            </div> -->
        </div>
        <div v-if="current == 'show'" class="row editor-div">
            <mavonEditor
                v-model="text"
                :ishljs="true"
                :toolbarsFlag="false"
                :subfield="false"
                defaultOpen="preview"
                codeStyle="tomorrow-night-eighties"
                :navigation="isPC"
                /> 
            <div v-if="current == 'a'" class="editor-div">
                <VueMarkdownIt
                class="show"
                style=""
                :source='text' :plugins='plugins'>
                </VueMarkdownIt>
            </div>
        </div>
        <!-- style="border: 1px solid black;height: 100%;padding-left: 8px;border-radius: 7px;margin-top: 7px;" -->
    </div>
</template>

<script>
import { ref } from 'vue'
import { reactive } from 'vue'
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
// import Clipboard from "clipboard";
import "@/assets/css/markdown.css"
// import { markdown } from '@/assets/js/markdown.js'

import VueMarkdownIt from 'vue3-markdown-it'
import 'highlight.js/styles/monokai.css'

import MarkdownItEmoji from 'markdown-it-emoji'
import MarkdownItDeflist from 'markdown-it-deflist'
import MarkdownItSub from 'markdown-it-sub'
import MarkdownItSup from 'markdown-it-sup'
import MarkdownItAbbr from 'markdown-it-abbr'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
    name: "CreateBlog",
    components: {
        VueMarkdownIt,
        VAceEditor,
        mavonEditor
    },
    setup() {
        ace.config.set(
        "basePath", 
        "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
        let textarea = ref('')
        window.addEventListener('onbeforeunload' ,() => {
            window.localStorage.setItem("text", textarea.value != undefined ? "" : "");
        })
        textarea = localStorage.getItem("text") || ""
        let current = ref('edit')
        let text = ref('')  
        let lang = ref('c_cpp')

        // const copy = () => {
        //     this.textarea = markdown(mavonEditor, textarea.value);
        //     this.$nextTick(() => {
        //     let clipboard = new Clipboard(".copy-btn");
        //     // 复制成功失败的提示
        //     clipboard.on("success", () => {
        //         this.$message({
        //         message: "复制成功",
        //         type: "success",
        //         });
        //     });
        //         clipboard.on("error", () => {
        //             this.$message.error("失败");
        //         });
        //     });
        // }
        // copy()
        const langList = ref([
            {
                id: 1,
                lang: "c_cpp"
            },
            {
                id: 2,
                lang: "java"
            },
            {
                id: 3,
                lang: "python"
            },
            // {
            //     id: 4,
            //     lang: "python3"
            // },
            {
                id: 5,
                lang: "go"
            },
        ])
        let plugins = reactive([
            {
                plugin: MarkdownItAbbr
            }, 
            {
                plugin: MarkdownItSub
            }, 
            {
                plugin: MarkdownItSup
            }, 
            {
                plugin: MarkdownItDeflist
            }, 
            {
                plugin: MarkdownItEmoji
            }
        ])

        return {
            textarea,
            plugins,
            current,
            text,
            lang,
            langList,
        }
    }
}
</script>
<style scoped>
.editor-div {
    background-color: aliceblue;
}
.show {
    margin-left: 5px;
    margin-right: 2px;
    /* border: 1px solid black;height: 100%; */
    /* padding-left: 8px; */
    border-radius: 7px;margin-top: 7px;
}
VAceEditor {
    border: 1px solid white;
}
pre {
  white-space: pre;
  word-wrap: normal;
}

.hljs {
  display: block;
  overflow-x: auto;
  padding: 2px 3px !important;
  line-height: 1.1;
  font-size: 16px !important;
  background: #f3f4f5;
  color: #5e6687;
}

.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-name {
  color: #f92672;
}

.hljs-code {
  color: #66d9ef;
}

.hljs-class .hljs-title {
  color: #df5000;
}

.hljs-attribute,
.hljs-symbol,
.hljs-regexp,
.hljs-link {
  color: #bf79db;
}

.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #5893c2;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
  color: #969896;
  margin-top: 5px;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id {
  font-weight: bold;
}

</style>




<!-- <template>
    <div class="container">
        <div>
            <el-button @click="current = 'edit'" type="primary">编辑</el-button>
            <el-button @click="current = 'show'" type="primary">预览</el-button>
            <div v-if="current == 'show'">
            <Markdown :source="text" style="background-color: white">
                <textarea style="width: 100vh; height: 50vh;">
                </textarea>
            </Markdown>
            </div>
            <div v-if="current == 'edit'">
                <textarea v-model="text" style="width: 100vh; height: 50vh;">

                </textarea>
            </div>
        </div>
    </div> 
</template>

<script>
import Markdown from 'vue3-markdown-it';
import 'highlight.js/styles/monokai.css';
import { ref } from 'vue';

export default {
    components: {
        Markdown,
    },
    setup() {
        let text = ref('');
        let current = ref('edit');

        return {
            current,
            text,
        }
    },
}
</script>

<style scoped>

</style> -->